<template>
	<view>
		 <!-- 蒙层   @touchmove.stop.prevent="()=>{}"  阻止冒泡事件 catchtouchmove整个屏幕禁止滑动 是关于小程序端-->
		 <view v-if="isShow" @click="show()" class="mask" @touchmove.stop.prevent="()=>{}" catchtouchmove="true" ></view>
		<view v-if="isShow" class="course-comment center column">
			<!-- 星星评价组件 -->
			<uni-rate :size="22"  v-model="comment.score"></uni-rate>
			<!-- {{descArr[comment.score-1]}}  数组的下标 从0开始所以要-1 
			comment.score是默认值5所以从下标决定他的数组 descArr内容 -->
			<text class="desc">{{descArr[comment.score-1]}}</text>
			<view class="input-box center">
				<!-- 多行文本  在uniapp文档里面的属性查看 -->
				<textarea  :value="comment.content" @input="getComment" class="textarea"    placeholder="请输入评价内容...."  />
				<!-- 按钮 -->
				<text class="btn" @click="submitComment">提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			comment:{
				type:Object,
				default:()=>(
				{
					userId:1,//当前用户id
					nickName:'xxx梦',
					userImage:'xxx.png',
					content:'',//评论内容
					score:5 ,//评分值
				})
			},
			descArr:{//每个评分的提示内容
				type:Array,
				default:()=>[
					'极差，课程很糟糕，我要吐槽',
					'差,我对课程不满意',
					'中评,课程一般',
					'良好,课程还可以',
					'推荐，课程翡翠棒'
				]
				
			}
		},
		data() {
			return {
				isShow:false
			}
		},
		methods: {
			show(){
				this.isShow = !this.isShow
			},
			// 获取品论框内容
			getComment(e){
			this.comment.content = 	e.detail.value
			},
			// 提交评论
			submitComment(){
				// 去除内容左右 空格
				this.comment.content  =  this.comment.content.trim()
				this.$emit('submitComment',this.comment)
			}
		}
	}
</script>

<style lang="scss">
	.course-comment{
		z-index: 100;
		position: fixed;
		left:0;
		right:0;
		bottom: 60%;
		width:650rpx;
		margin: 0 auto;
		padding-top:30rpx;
		font-size: 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		.desc{
			color: $xg-text-color-black;
			letter-spacing: 2px; 			// 每个字的间隔 是2px
			padding: 20rpx 0 ;
		}
		.input-box{
			border-top: $xg-underline;//灰色的下划线
			width: 100%;
			white-space: nowrap;  //这里有flex 布局 可以 让字体不换行
 		}
		
		.textarea{
			background-color: #F8F9FB;
			border-radius: 0 0 0 20rpx;
			height: 100rpx;
			font-size: 30rpx;
			padding: 10rpx;
			width: 100%;
		}
		.btn{
			padding: 0 15rpx;
			color: $xg-text-color-blue;
			
		}
	}
</style>
